<template>
  <el-dialog
    title="日程详情"
    :model-value="modelValue"
    @update:model-value="$emit('update:modelValue', $event)"
    width="600px"
  >
    <div v-loading="loading" class="schedule-detail">
      <div class="detail-item">
        <span class="label">日程标题：</span>
        <span>{{ detail.title }}</span>
      </div>
      
      <div class="detail-item">
        <span class="label">日程类型：</span>
        <el-tag :type="getTypeTag(detail.type)">
          {{ getDictLabel('SCHEDULE_TYPE', detail.type) }}
        </el-tag>
      </div>

      <div class="detail-item">
        <span class="label">状态：</span>
        <el-tag :type="getStatusTag(detail.status)">
          {{ getDictLabel('SCHEDULE_STATUS', detail.status) }}
        </el-tag>
      </div>

      <div class="detail-item">
        <span class="label">优先级：</span>
        <el-tag :type="getPriorityTag(detail.priority)">
          {{ getDictLabel('PRIORITY_LEVEL', detail.priority) }}
        </el-tag>
      </div>

      <div class="detail-item">
        <span class="label">开始时间：</span>
        <span class="content">{{ detail.startTime }}</span>
      </div>

      <div class="detail-item">
        <span class="label">结束时间：</span>
        <span class="content">{{ detail.endTime }}</span>
      </div>

      <div class="detail-item">
        <span class="label">地点：</span>
        <span class="content">{{ detail.location }}</span>
      </div>

      <div class="detail-item">
        <span class="label">参与者：</span>
        <div class="content">
          <el-tag
            v-for="item in detail.participants"
            :key="item"
            class="participant-tag"
          >
            {{ item }}
          </el-tag>
        </div>
      </div>

      <div class="detail-item">
        <span class="label">提醒时间：</span>
        <span class="content">{{ getReminderText(detail.reminder) }}</span>
      </div>

      <div class="detail-item">
        <span class="label">日程内容：</span>
        <div class="content content-area">{{ detail.content }}</div>
      </div>

      <div class="detail-item">
        <span class="label">创建人：</span>
        <span class="content">{{ detail.createBy }}</span>
      </div>

      <div class="detail-item">
        <span class="label">创建时间：</span>
        <span class="content">{{ detail.createTime }}</span>
      </div>
    </div>

    <template #footer>
      <el-button @click="$emit('update:modelValue', false)">关 闭</el-button>
      <el-button
        v-if="detail.status === '0'"
        type="primary"
        @click="handleUpdateStatus('1')"
      >
        开始日程
      </el-button>
      <el-button
        v-if="detail.status === '1'"
        type="success"
        @click="handleUpdateStatus('2')"
      >
        完成日程
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { getScheduleDetail, updateScheduleStatus } from '@/api/schedule'
import { getDictLabel } from '@/utils/dictionary'

const props = defineProps({
  modelValue: Boolean,
  scheduleId: String
})

const emit = defineEmits(['update:modelValue'])

// 数据
const loading = ref(false)
const detail = ref({})

// 获取详情
const getDetail = async () => {
  if (!props.scheduleId) return
  
  loading.value = true
  try {
    const res = await getScheduleDetail(props.scheduleId)
    detail.value = res.data
  } catch (error) {
    console.error('获取日程详情失败:', error)
  } finally {
    loading.value = false
  }
}

// 更新状态
const handleUpdateStatus = async (status) => {
  try {
    await updateScheduleStatus(props.scheduleId, status)
    ElMessage.success('更新成功')
    getDetail()
  } catch (error) {
    console.error('更新状态失败:', error)
  }
}

// 标签显示
const getTypeTag = (type) => {
  const map = { '1': 'primary', '2': 'success', '3': 'warning' }
  return map[type] || 'info'
}

const getStatusTag = (status) => {
  const map = { '0': 'info', '1': 'warning', '2': 'success', '3': 'danger' }
  return map[status] || 'info'
}

const getPriorityTag = (priority) => {
  const map = { '0': 'info', '1': 'warning', '2': 'danger' }
  return map[priority] || 'info'
}

const getReminderText = (reminder) => {
  const map = {
    '0': '不提醒',
    '5': '5分钟前',
    '15': '15分钟前',
    '30': '30分钟前',
    '60': '1小时前',
    '120': '2小时前'
  }
  return map[reminder] || '未知'
}

// 监听ID变化
watch(
  () => props.scheduleId,
  () => {
    if (props.modelValue && props.scheduleId) {
      getDetail()
    }
  }
)
</script>

<style lang="scss" scoped>
.schedule-detail {
  padding: 0 20px;

  .detail-item {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;

    .label {
      width: 100px;
      color: var(--text-secondary);
      flex-shrink: 0;
    }

    .content {
      flex: 1;
      color: var(--text-primary);
    }

    .content-area {
      white-space: pre-wrap;
      line-height: 1.5;
    }

    .participant-tag {
      margin-right: 8px;
      margin-bottom: 8px;
    }
  }
}
</style> 